<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router'
import { deletePostApi } from '@/apis/post'
import { useUserStore } from "@/store/user";


const router = useRouter()
const userStore = useUserStore()


const post = defineProps({
  postData: {
    type: Object,
    required: true
  },
  editor: {
    type: Boolean
  },
  openComplaint: {
    type: Function
  },
  getPost: {
    type: Function
  },
  getCollection: {
    type: Function
  }
})

/* 发布日期只要年月日 */
const publishDate = computed(() => {
  return post.postData.publishTime.slice(0, 10)
})




// #region 计算属性计算当前帖子是什么状态
const postStatus = computed(() => {
  let status = ''
  switch (post.postData.status) {
    case 1:
      status = '审核中'
      break

    case 4:
      status = '帖子已被封禁'
      break
  }
  return status

})

// #endregion

// #region 删除帖子按钮点击事件
const deletePost = (event) => {

  ElMessageBox.alert('确定要删除该帖子吗？', '提示', {
    // type: 'warning'
  }).then(async () => {
    // 发送请求删除帖子
    await deletePostApi({ postId: post.postData.postId, userId: userStore.userInfo.id })
    ElMessage.success('删除成功')

    /* 判断传递过来的收藏方法是否为空,就能知道这次是删除收藏还是删除帖子 */
    if (post.getCollection) {
      // 收藏列表
      await post.getCollection()
    } else {
      //重新获得帖子列表
      await post.getPost()
    }

  }).catch(() => {
    ElMessage.info('取消删除')
  })
  event.stopPropagation()
}

// #endregion

// #region 申诉按钮点击事件
const handleOpenComplaint = () => {
  post.openComplaint(post.postData.postId)
}

// #endregion



//移动端的进来帖子方法，点击整个帖子都可以进入
function joinPost() {
  if (window.innerWidth < 768) {
    router.push('/postDetail/' + post.postData.postId)
  }
}
// 限制长度
</script>

<template>
  <div v-if="postData.status !== 4" class="contain" @click="joinPost">
    <div class="type">
      {{ postData.categoryName }}
      <svg-icon style="margin-left: 10px;" v-if="postData.isEssence === 1" name="jinghua" fill="red" width="22px"
        height="22px"></svg-icon>
    </div>
    <router-link :to="'/postDetail/' + postData.postId" class="title">
      {{ postData.title }}
    </router-link>
    <div class="content">
      {{ postData.content }}
    </div>
    <div class="post-image" v-if="postData.imgList !== null">
      <ul>
        <li v-for="(img, index) in postData.imgList" :key="img.postId">
          <img :src="img" alt="" width="50px">
        </li>
      </ul>

    </div>
    <div class="info">
      <ul>
        <li><svg-icon name="yonghu"></svg-icon>{{ postData.userName }}</li>
        <li><svg-icon name="dianzan" :fill="'#999999'"></svg-icon>{{ postData.goodNumber || 0 }}</li>
        <li><svg-icon name="yanjing"></svg-icon>{{ postData.readNumber || 0 }}</li>
        <li><svg-icon name="huifu"></svg-icon>{{ postData.replyNumber || 0 }}</li>
        <li><svg-icon name="shizhong"></svg-icon>{{ publishDate }}</li>

        <li style="color: red;" v-if="editor">{{ postStatus }} </li>
        <li v-if="postData.userName === userStore.userInfo.username && postData.status === 4"><el-button type="danger"
            @click="handleOpenComplaint">我要申诉</el-button>
        </li>

      </ul>
    </div>

    <div class="editor" v-if="editor">
      <svg-icon name="shanchu" @click="deletePost($event)"></svg-icon>
    </div>
  </div>


  <div v-else class="contain" @click="joinPost">
    <router-link :to="'/postDetail/' + postData.postId" class="title">
      {{ postData.title }}
    </router-link>
    <div class="content">
      {{ postData.content }}
    </div>
    <div style="color: red;">帖子已被封禁</div>
    <div class="editor" v-if="editor">
      <svg-icon name="shanchu" @click="deletePost"></svg-icon>
    </div>
  </div>

</template>

<style lang='scss' scoped>
// pc端样式
@media (min-width: 768px) {
  .contain {
    margin-top: 30px;
    background-color: rgb(248, 248, 248);
    padding: 20px 20px 5px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; // 添加过渡效果
    border-bottom: 1px solid rgb(163, 162, 162);
    position: relative;

    &:hover {
      // background-color: rgb(248, 248, 248); // 悬停时背景颜色
      transform: translateY(-5px); // 上移5px
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(186, 229, 247, 0.5); // 加强阴影效果，并添加发光效果
      border-color: rgb(255, 255, 255); // 悬停时边框颜色变化
    }
  }


  .type {
    display: flex;
  }

  .title:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  .content {
    word-break: break-all; //强制换行
    white-space: wrap; // 防止换行
    overflow: hidden; // 隐藏溢出的内容
    text-overflow: ellipsis; // 使用省略号表示溢出文本
    margin: 10px 0; // 添加一些顶部间距
    max-height: 110px; // 限制内容最大高度，确保省略号生效
  }

  /* 图片 */
  .post-image {
    margin-bottom: 10px;

    & ul {
      display: flex;

      & li {
        margin-left: 10px;
        width: 100px;
      }
    }
  }

  .type {
    font-weight: bold; // 可以加粗标题
    margin-bottom: 10px; // 添加一些顶部间距
  }

  .title {
    color: rgb(32, 32, 183);
  }

  .info {

    ul {
      display: flex;
      // align-items: center;

      li {
        display: flex;
        align-items: center;
        padding-left: 20px;
      }

      li:first-child {
        padding: 0;

      }
    }
  }

  .editor {
    &>svg:nth-child(1) {
      // border: 1px solid red;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

// 移动端样式
@media (max-width: 767px) {
  .contain {
    width: 95vw;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 10px;
    background-color: rgb(248, 248, 248);
    padding: 20px 20px 5px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; // 添加过渡效果
    border-bottom: 1px solid rgb(163, 162, 162);
    position: relative;
  }


  .content {
    word-break: break-all; //强制换行
    white-space: wrap; // 防止换行
    overflow: hidden; // 隐藏溢出的内容
    text-overflow: ellipsis; // 使用省略号表示溢出文本
    margin: 10px 0; // 添加一些顶部间距
    max-height: 110px; // 限制内容最大高度，确保省略号生效
  }

  .type {
    font-weight: bold; // 可以加粗标题
    margin-bottom: 10px; // 添加一些顶部间距
  }

  .title {
    color: rgb(32, 32, 183);
    word-break: break-all; //强制换行
    white-space: wrap; // 防止换行
    overflow: hidden; // 隐藏溢出的内容
    text-overflow: ellipsis; // 使用省略号表示溢出文本
  }

  .info {
    font-size: 1.5rem;

    ul {
      display: flex;

      li {
        display: flex;
        align-items: center;
        padding-left: 15px;
      }

      li:first-child {
        padding: 0;
        // border: 1px solid red;
      }


    }
  }

  /* 删除样式 */
  .editor {
    &>svg:nth-child(1) {
      // border: 1px solid red;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        cursor: pointer;
      }
    }
  }


}
</style>